<template>
  <div class="page-goods df">
    <div class="navs fn">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          @click="handleClick"
          v-for="item in navList"
          :key="item"
          :title="item"
        />
      </van-sidebar>
    </div>
    <div class="f1 right-container">
      <!-- 商品列表 -->
      <div class="goods-list">
        <!-- 商品 -->
        <div v-for="item in goodsList" :key="item.name" class="good-item">
          <h3 class="title">{{ item.name }}</h3>
          <!-- 食品列表 -->
          <div class="foods-list">
            <!-- 食品 -->
            <van-card
              v-for="subItem in item.foods"
              :key="subItem.id"
              num="2"
              :price="subItem.price"
              :desc="subItem.goodsDesc"
              :title="subItem.name"
              :thumb="subItem.imgUrl"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
//引入滚动
import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      activeKey: 0,
      heightList: [],
    };
  },

  methods: {
    //点击菜单
    handleClick(index) {
      this.activeKey = index;
      const goodNodes = document.querySelectorAll(".good-item");
      this.bs1.scrollToElement(goodNodes[this.activeKey], 600);
    },
  },

  //在计算属性里面展开
  computed: {
    ...mapGetters("shop", ["navList"]),
    ...mapState("shop", ["goodsList"]),
  },
  async created() {
    await this.$store.dispatch("shop/A_getGoodsData");
    this.$nextTick(() => {
      this.bs = new BScroll(".navs", {
        click: true,
      });
      this.bs1 = new BScroll(".right-container", {
        click: true,
        probeType: 3,
      });
      //获取高度
      this.bs1.on("scroll", ({ y }) => {
        let Y = Math.abs(y);
        //  console.log(Y);
        //赋值给索引
        this.heightList.reduce((tatol, cur, index) => {
          if (Y > tatol && Y < tatol + cur) {
            this.activeKey = index;
          }

          return tatol + cur;
        }, 0);
      });

      const goodNodes = document.querySelectorAll(".good-item");
      goodNodes.forEach((v) => {
        this.heightList.push(v.clientHeight);
        // console.log(this.heightList);
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.page-goods {
  height: 100%;
  overflow: hidden;
}
.title {
  height: 40px;
  line-height: 40px;
  background: #f4f4f4;
  padding-left: 5px;
  border-left: 6px solid #ddd;
}
</style>